<script setup>
import { ref, onMounted } from 'vue'
import courseService from '../../services/course'
import { showSuccess, showError } from '../../utils/message'

const props = defineProps({
  student: {
    type: Object,
    default: () => null
  },
  selectedStudents: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['confirm', 'cancel'])

const dialogVisible = ref(false)
const loading = ref(false)
const courseOptions = ref([])
const selectedCourses = ref([])

// 打开对话框
const openDialog = () => {
  dialogVisible.value = true
  loadCourseOptions()
}

// 加载课程选项
const loadCourseOptions = async () => {
  try {
    loading.value = true
    courseOptions.value = await courseService.getCourseOptions()
  } catch (error) {
    showError('加载课程选项失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

// 处理确认
const handleConfirm = async () => {
  try {
    if (!selectedCourses.value.length) {
      showError('请选择要分配的课程')
      return
    }

    if (props.selectedStudents.length > 0) {
      // 批量分配
      await courseService.batchAssignCourses(
        props.selectedStudents.map(s => s.id),
        selectedCourses.value
      )
    } else if (props.student) {
      // 单个分配
      await courseService.assignCoursesToStudent(
        props.student.id,
        selectedCourses.value
      )
    }

    showSuccess('课程分配成功')
    emit('confirm', {
      studentId: props.student?.id,
      studentIds: props.selectedStudents.map(s => s.id),
      courses: selectedCourses.value
    })
    dialogVisible.value = false
    selectedCourses.value = []
  } catch (error) {
    showError(error.message || '课程分配失败')
    console.error(error)
  }
}

// 处理取消
const handleCancel = () => {
  dialogVisible.value = false
  selectedCourses.value = []
  emit('cancel')
}

defineExpose({
  openDialog
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="selectedStudents.length ? '批量分配课程' : '分配课程'"
    width="600px"
    @close="handleCancel"
  >
    <div class="course-assign-dialog">
      <el-form v-loading="loading">
        <el-form-item label="选择课程">
          <el-select
            v-model="selectedCourses"
            multiple
            placeholder="请选择课程"
            style="width: 100%"
          >
            <el-option
              v-for="item in courseOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span>{{ item.label }}</span>
              <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
                {{ item.points }}积分
              </span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.course-assign-dialog {
  padding: 20px 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
